<!DOCTYPE html>
<html>
<head>
    <title>Optical Wedge Interference Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="300"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1;
        ctx.font = "italic 20px Times New Roman";

        // Helper function to draw an arrow head
        function drawArrowHead(toX, toY, angle) {
            const headlen = 8;
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Helper to draw a dimension line with arrows
        function drawDimensionLine(x1, y1, x2, y2, text, textOffset = { x: 0, y: -8 }) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();

            // Arrows
            drawArrowHead(x1, y1, Math.atan2(y1 - y2, x1 - x2));
            drawArrowHead(x2, y2, Math.atan2(y2 - y1, x2 - x1));
            
            ctx.save();
            ctx.font = "italic 20px Times New Roman";
            ctx.fillText(text, (x1 + x2) / 2 + textOffset.x, y1 + textOffset.y);
            ctx.restore();
        }
        
        // --- Main Drawing ---

        // Coordinates and parameters
        const y_axis = 150;
        const x_source_edge = 50;
        const source_width = 20;
        const source_height = 60;
        const x_wedge_front = 680;
        const x_wedge_tip = 710;
        const wedge_h_half = 50;
        const x_focus = 600;
        const x_dashed = 630;
        
        // 1. Light Source (S)
        const x_s_rect = x_source_edge;
        const y_s_rect = y_axis - source_height / 2;
        
        ctx.save();
        ctx.fillStyle = '#A9A9A9'; // Dark gray part
        ctx.fillRect(x_s_rect, y_s_rect, source_width, source_height);
        ctx.strokeRect(x_s_rect, y_s_rect, source_width, source_height);
        ctx.restore();
        ctx.fillText('S', x_s_rect, y_s_rect - 10);

        // Dimension D for Source
        const x_dim_d = x_s_rect - 15;
        ctx.beginPath();
        ctx.moveTo(x_dim_d, y_s_rect);
        ctx.lineTo(x_dim_d, y_s_rect + source_height);
        ctx.stroke();
        drawArrowHead(x_dim_d, y_s_rect, Math.PI / 2);
        drawArrowHead(x_dim_d, y_s_rect + source_height, -Math.PI / 2);
        ctx.fillText('D', x_dim_d - 20, y_axis);
      
        // 2. Optical Wedge (n)
        ctx.beginPath();
        ctx.moveTo(x_wedge_front, y_axis - wedge_h_half);
        ctx.lineTo(x_wedge_tip, y_axis);
        ctx.lineTo(x_wedge_front, y_axis + wedge_h_half);
        ctx.save();
        ctx.fillStyle = '#E0E0E0';
        ctx.fill();
        ctx.stroke();
        ctx.restore();
        ctx.fillText('n', x_wedge_tip + 10, y_axis + 20);

        // 3. Rays
        // Incident ray
        ctx.beginPath();
        ctx.moveTo(x_source_edge + source_width, y_axis);
        ctx.lineTo(x_wedge_front - 20, y_axis);
        ctx.stroke();
        drawArrowHead(350, y_axis, 0);
        drawArrowHead(500, y_axis, 0);

        // Reflected / Converging rays (schematic)
        ctx.beginPath();
        ctx.moveTo(x_wedge_tip, y_axis);
        ctx.lineTo(x_focus, y_axis);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(x_wedge_front-10, y_axis-10);
        ctx.lineTo(x_focus, y_axis);
        ctx.stroke();
        
        // Add arrows to show reflection direction, as in the composite diagram
        const arrow_x = x_focus + 35;
        ctx.beginPath();
        ctx.moveTo(arrow_x, y_axis - 2);
        ctx.lineTo(arrow_x - 10, y_axis - 2);
        ctx.stroke();
        drawArrowHead(arrow_x - 10, y_axis - 2, Math.PI);
        
        ctx.beginPath();
        ctx.moveTo(arrow_x, y_axis + 2);
        ctx.lineTo(arrow_x - 10, y_axis + 2);
        ctx.stroke();
        drawArrowHead(arrow_x - 10, y_axis + 2, Math.PI);

        // 4. Dimensions (z₀, Δz)
        // Dimension z₀
        const y_dim_z0 = y_axis + 80;
        ctx.beginPath();
        ctx.moveTo(x_source_edge, y_dim_z0);
        ctx.lineTo(x_wedge_front, y_dim_z0);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(x_source_edge, y_dim_z0 - 5);
        ctx.lineTo(x_source_edge, y_axis + source_height/2);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(x_wedge_front, y_dim_z0 - 5);
        ctx.lineTo(x_wedge_front, y_axis + wedge_h_half);
        ctx.stroke();

        ctx.fillText('z', (x_source_edge + x_wedge_front)/2 - 10, y_dim_z0 - 5);
        ctx.save();
        ctx.font = "italic 15px Times New Roman";
        ctx.fillText('0', (x_source_edge + x_wedge_front)/2, y_dim_z0 - 2);
        ctx.restore();

        // Dimension Δz
        // Dashed line
        ctx.save();
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(x_dashed, y_axis - 40);
        ctx.lineTo(x_dashed, y_axis + 20);
        ctx.stroke();
        ctx.restore();

        // Dimension line for Δz
        const y_dim_dz = y_axis - 50;
        drawDimensionLine(x_dashed, y_dim_dz, x_wedge_tip, y_dim_dz, 'Δz', {x: -15, y: -8});

    </script>
</body>
</html>